<template>
	<view class="content">
		<u-swipe-action>
			<u-swipe-action-item :options="options" v-for="(item, index) in contactList" :key="index" @click="click(index)" >
				<view class="swipe-action u-border-top" :class="[index === contactList.length - 1 && 'u-border-bottom']">
					<view class="swipe-action__content">
						<view class="swipe-action__content_left">
							<u-avatar :src="item.user.avatar" shape="square" size="35"></u-avatar>
							<text class="swipe-action__content__text">{{ item.user.username }}</text>
						</view>
						<text class="iconf"><i class="iconfont icon-yiguanzhuhuati" style="font-size: 35rpx; color: #d81e06;"></i>
							已关注</text>
					</view>
				</view>
			</u-swipe-action-item>
		</u-swipe-action>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				isfocus:true,
				contactList:[],
				options: [{
					text: '取关',
					style: {
						backgroundColor: '#ed1941'
					}
				}],
			};
		},
		onShow(){
			this.showContact()
		},
		methods: {
			showContact(){
				uni.request({
					url: 'http://localhost:8081/user/getContact',
					method: 'GET',
					data: {
						id: uni.getStorageSync("token")
					},
					dataType: 'json',
					success: (res) => {
						//if (res.data.state == 200) {
						this.contactList = res.data;
						//	}
					}
				});
			},
			click(index) {
				let contact_id = this.contactList[index].contact_id
				uni.showModal({
					title: '温馨提示',
					content: '确定要取消关注吗？',
					success: res => {
						if (res.confirm) {
							this.contactList.splice(index,1)
							uni.request({
								url: 'http://localhost:8081/user/delContactById?contact_id='+contact_id,
								method: 'DELETE',
								dataType: 'json',
								success: (res) => {
									console.log(res)
									if (res.data.state == 200) {
										this.$message({
											type: "success",
											message: res.data.message,
										});						
									}else{
										this.$message({
											type: "success",
											message: res.data.message,
										});	
									}							
								}
							});
						}
					}
				})
			}
		}
	};
</script>

<style lang="scss">
	.u-page {
		padding: 0;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			display: flex;
			padding: 15rpx 0;
			margin-left: 25rpx;
			align-items: center;
			justify-content: space-between;
			&_left{
				display: flex;
				align-items: center;
			}
			&__text {
				font-size: 15px;
				color: $u-main-color;
				margin-left: 30rpx;
			}
			.iconf{
				margin-right: 50rpx;
				font-size: 26rpx;
			}
		}
	}
</style>
